<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Styling The Tree to have Headers</title>

	<style someProperty="text/css">
		@import "../../../dojo/dojo/resources/dojo.css";
		@import "../../../dojo/dijit/css/dijitTests.css";
		@import "../../../dojo/dojo/resources/dnd.css";

		.listTree {
			width: 300px;
		}

		.dijitTreeExpandoOpened,
		.dijitTreeExpandoClosed {
			display: none;
		}


		.dijitTreeNode .dijitTreeRow {
			padding-top: 4px;
			padding-bottom: 2px;
			border-bottom: 1px solid #bbb;
		}

		.dijitTreeExpandoLeaf {
			display: none;
		}

		.dijitTreeIsLast,
		.dijitTreeNode {
			background: transparent;
		}
		.dojoDndItemAnchor,
		.dojoDndItemSelected {
			background:#CCCCFF none repeat scroll 0 0;
			color:black;
		}

		.headerRow {
			background-color: #eee;
		}
		.headerRow .dijitTreeLabel {
			font-weight: bold;
		}

		.dijitExpandoText {
			display: none;
		}

	</style>

	<!-- required: the default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/soria/soria.css">

	<!-- required: dojo.js -->

	<script type="text/javascript" src="../../../dojo/dojo.js"
		djConfig="parseOnLoad: true"></script>

	<script type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dojo.data.ItemFileWriteStore");
		dojo.require("dijit.tree.TreeStoreModel");
		dojo.require("dijit.Tree");

		function getRowClass(item, isExpanded) {
			if (!item
					|| !treeStore.isItem(item)
					|| treeStore.getValue(item, "type") != "header") {
				return null;
			}
			return "headerRow";
		}

	</script>

</head>
<body class="soria">

	<div dojoType="dojo.data.ItemFileWriteStore" jsId="treeStore"
		url="places.json"></div>

	<div
		dojoType="dijit.tree.TreeStoreModel"
		jsId="treeModel"
		store="treeStore"
		query="{id:'root'}"
		childrenAttrs="children"></div>

	<h1 class="testTitle">Styling a Tree to appear like an expandable list</h1>
	<p>
		This example shows how to style the dijit.Tree widget to look like an expandable list.
		To do this, you must specify the getRowClass function
	</p>

	<div
		dojoType="dijit.Tree"
		id="placeTree"
		model="treeModel"
		showRoot="false"

		getRowClass="getRowClass"

		class="listTree"
		openOnClick="true"
		persist="false"
	></div>

	</body>
</html>
